<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='../../vue/vue.js'></script>
    <style>
        .son {
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div id='app'>
        <father></father>

    </div>
</body>

<!-- 父组件 -->
<template id="father">
    <div>
       <h1> {{total}} -- {{sqy}}</h1>
       <son  :sqy="sqy" :myis="flag" :obje="obj" @my-event="getData"></son>
       <son  :sqy="sqy" :myis="flag" :obje="obj" @my-event="getData"></son>
       <son  :sqy="sqy" :myis="flag" :obje="obj" @my-event="getData"></son>
    </div>
</template>

<!-- 子组件 -->
<template id="son">
    <div>
    {{sg}}
   {{sqy}}--{{myis}}
   <br>
   {{obje}}
<h3 class="son">子组件{{num}}<button @click="sendData">加10 </button></h3>
   
    </div>
</template>
<script>
    const son = {
        data() {
            return {
                num: 0,
                sg: '张昊的前女友'
            }
        },
        template: '#son',
        // 父组件将值通过属性将值传给子组件
        // props: ['sqy', 'myis', 'obje']
        // props: {
        //     'sqy': [String,Number],//多类型限制
        //     'myis': Boolean,
        //     'obje': Object
        // }
        props: {
            sqy: {
                type: String,
                default: '卫龙'
            },
            myis: {
                type: Boolean,
                required: true,
            },
            obje: Object


        },
        methods: {
            sendData() {
                this.num += 10
                this.$emit('my-event', 10)

            }
        }
    }



    const father = {
        data() {
            return {
                total: 0,
                msg: '张昊',
                sqy: '孙庆瑶',
                flag: true,
                obj: {
                    age: 15,
                    sex: 'boy',
                    name: '张三'
                }
            }
        },
        methods: {
            getData(val) {
                console.log(val);
                this.total += val
            }
        },
        template: '#father',
        components: {
            son
        }
    }


    const vm = new Vue({
        data: {

        },
        created() {},
        methods: {},
        computed: {},
        components: {
            father
        }
    }).$mount('#app')
</script>

</html>